<template>
  <div class="container">
    <!--    logo区域-->
    <div class="logo">
      <img src="@/assets/imgs/logo.png" alt="" />
    </div>
    <!--    表单区域-->
    <div class="login-form">
      <div class="login-title c-text-center">
        <span class="c-font-20 c-font-b">巨软智慧后勤综合管理平台</span><br />
        <span class="c-title-color c-font-14"
          >Intelligent logistics integrated management platform</span
        >
      </div>
      <el-form
        :model="loginForm"
        :rules="loginRules"
        ref="ruleForm"
        class="demo-form"
      >
        <el-form-item prop="userName">
          <el-input
            v-model="loginForm.userName"
            prefix-icon="el-icon-user"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            prefix-icon="el-icon-lock"
            placeholder="请输入密码"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-row :gutter="20" type="flex" justify="space-between">
            <el-col :span="14">
              <el-input
                v-model="loginForm.code"
                placeholder="请输入验证码"
              ></el-input>
            </el-col>
            <el-col :span="10">
              <img
                @click="getCodeImg"
                :src="loginForm.codeImg"
                alt=""
                style="width: 106px; height: 40px"
              />
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" style="width: 100%" @click="handleLogin"
            >登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getCodeImg } from "@/api/modules/login";
import { login } from "../api/modules/login";
import Rsa from "@/utils/rsa";
import Cookies from "js-cookie";
import { ElMessage } from "element-plus";
import store from "@/store";
import { checkData } from "../utils";
export default {
  data() {
    return {
      loginForm: {
        userName: "",
        password: "",
        code: "",
        codeImg: "",
        uuid: "",
      },
      //  表单验证规则
      loginRules: {
        userName: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur",
          },
          {
            validator: checkData,
          },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.getCodeImg();
  },
  methods: {
    //获取验证码
    getCodeImg() {
      getCodeImg().then((res) => {
        this.loginForm.codeImg = res.data.img;
        this.uuid = res.data.uuid;
      });
    },
    //登录功能
    handleLogin() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          login({
            username: this.loginForm.userName,
            password: Rsa.encrypt(this.loginForm.password),
            uuid: this.uuid,
            code: this.loginForm.code,
          })
            .then((res) => {
              if (res.code === 200) {
                ElMessage({
                  message: "登录成功",
                  type: "success",
                });
                //将token放入cookies里面
                Cookies.set("token", res.data.token);
                const persionArr = [];
                this.getCodeImg();
                const persionList = res.data.user.authorities;
                const userName = res.data.user.username;
                store.dispatch("SET_PERMISSION", persionList);
                //重置加载菜单状态
                persionList.map((item) => {
                  persionArr.push(item.authority);
                });
                sessionStorage.setItem(
                  "authorities",
                  JSON.stringify(persionArr)
                );
                Cookies.set("userInfo", userName);
                store.commit("setUserInfo", res.data.user);
                sessionStorage.setItem(
                  "userInfo",
                  JSON.stringify(res.data.user)
                );
                store.commit("menuRouteLoaded", false);
                this.$router.push("/");
                this.getCodeImg();
              } else {
                ElMessage.error(res.msg);
                this.getCodeImg();
              }
            })
            .catch((err) => {
              console.log(err);
            });
        }
      });
    },
  },
  computed: {
    topMenuData() {
      return this.$store.getters.topMenu;
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  height: 100vh;
  justify-content: center;
  background: url("../../src/assets/imgs/login-bg.png") no-repeat;
  box-sizing: border-box;
  background-size: contain;
  overflow: hidden;
  .logo {
    height: 60px;

    img {
      margin: 20px 24px;
      width: 160px;
      height: 24px;
    }
  }

  .login-form {
    background-color: #f1f1f1;
    float: right;
    margin: 160px 80px;
    padding: 0 20px;

    .login-title {
      height: 60px;
      margin: 20px 0;
    }

    .demo-form {
    }
  }
}
</style>
